@charset'UTF-8';
 /**
 * 圣诞节圣诞树
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/12/11
 */
 @import'../_components/variables.scss';
 @import'../_components/_mixin.scss';
 @import'../_components/reset.scss';
 @import'../_components/button.scss';

 @import'../assets/ymtUI.scss';
 @import'../assets/ymt_components.scss';

 @import'../assets/common.scss';

 $imgPath:'/images/christmas/';
 $imgPath:'http://staticontent.ymatou.com/images/activity/christmas/';

 .tree-container{
   background: #5f1211;
 }
.tree-btn{
    background:#cc3333;
    color:#fff;
    border-radius:$rem*12;
    height: $rem*80;
    margin-top:$rem*20;
    font-size: $rem*35;
    &.invalid{
      background:#cecece;
    }
}
 .tree-wrapper{
    //height:$rem*725;
    background-image:url(#{$imgPath}tree_bg3.png);
        background-position: top;
    @extend .bg__full;
    &:after{
      content: '';
      position:absolute;
      background-image:url(#{$imgPath}prompt.png);
       @extend .bg__full;
      width:$rem*193;
      height: $rem*164;
      top:$rem*230;
      right:$rem*15;
      animation: page_shake 2.2s ease 2s 2;
    }
 }

 @-webkit-keyframes page_shake {
    from{
      transform: scale(1.2);
    }
    to{
      transform: scale(.8);
    }
}

 .snow-wrapper{
   background: -webkit-radial-gradient(circle, rgba(255, 48, 0,.4) , rgba(95, 18, 17,1));
    overflow: hidden;
 }

.battlefield{
  &-wrapper{
    position: relative;
  }
  &-hd{
    height:$rem*60;
    .close-btn{
      position:absolute;
      width:$rem*60;
      height:$rem*60;
      padding: $rem*13 $rem*5;
      text-align: center;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      background:#cb8f20;
      color:#fff;
          line-height: 1;
      font-size:$rem*18;
      right:$rem*10;      
      top:$rem*10;
      z-index:5;
      
    }
  }
  &-bd{
    &.close{
      opacity: 0;
    }
    position:absolute;
    left: 0;
    top:0;
    width:100%;
    height:$rem*350;
   
    transition: opacity 0.25s ease-in-out;
    opacity: 1;
    .bullet{
      position: absolute;
      color:#fff;
      transform: translate(0,0);
      white-space: nowrap;
      will-change: transform;
      transition: transform 2.5s ease-in-out;
    }
  }
}

.tree-wrapper{
 
  .wish{
    height:$rem*101;
    background-image:url(#{$imgPath}wish_bg.png);
    @extend .bg__full;
     margin: 0 auto;
    margin-top:$rem*-30;
    color:#c92000;
    font-size:$rem*22;
    text-align: center;
    padding-top:$rem*45;
  }
  .wish-bg{
    height:$rem*152;
    background-image:url(#{$imgPath}wish_bg2.png);
    @extend .bg__full;
    margin: 0 auto;
    margin-top:$rem*-60;
    color:#c92000;
    font-size:$rem*40;
    text-align: center;
    padding-top:$rem*65;
    position:relative;
    z-index:3;
  }
  .wish-txt{
    text-align: center;
    font-size:$rem*20;
    color:#fdedad;
  }
}
.tree-kind{
  position:relative;
  z-index:3;
  height:$rem*719;
  @extend .bg__full;
  margin: 0 auto;
  width:$rem*500;
  
}
.tree-kinds-1{
  height:$rem*719;
  background-image:url(#{$imgPath}tree_01.png);
}
.tree-kinds-2{
  height:$rem*689;
  background-image:url(#{$imgPath}tree_02.png);
}
.tree-kinds-3{
  height:$rem*723;
  background-image:url(#{$imgPath}tree_03.png);
}
.tree-kinds-4{
  height:$rem*739;
  background-image:url(#{$imgPath}tree_04.png);
}

.wish{
  &-wrapper{
    padding:$rem*18 $rem*24;
  }
  &-inner{
    background:#fff2cf;
    border-radius:$rem*12;
    min-height: 100px;
    padding:0 $rem*22;
  }
  &-title{
    text-align: center;
    color:#c10900;
    font-size: $rem*30;
    border-bottom:2px dashed #c7b299;
    height: $rem*65;
    line-height: $rem*65;
  }
  &-content{
    .text-bg{
      margin-top:$rem*20;
      height:$rem*211;
      background-image:url(#{$imgPath}wish_box_bg.jpg);
      @extend .bg__full;
      margin: 0 auto;
      color:#6a4923;
      font-size:$rem*30;
      position:relative;
      .text{
        position:absolute;
        top:$rem*42;
        left:$rem*200;
        width:$rem*250;
        text-align:center;
      }
    }
}
  &-detail{
    &>.hd{
      height: $rem*24;
      font-size: $rem*24;
      color:#6a4923;
      text-align:center;
      margin: $rem*20 0;
      h4{ 
        border-bottom:2px dashed #c7b299;
        height:$rem*15;
      }
      span{
        padding:0 $rem*47;
        background:#fff2cf;
      }
    }
    .bd{
      padding-bottom:$rem*20;
      .no-result{
        font-size:$rem*20;
        color:#b59372;
        text-align: center;
        margin: $rem*100 0;
        .pic{
          margin-top:$rem*20;
          height:$rem*205;
          background-image:url(#{$imgPath}nopraise_bg.jpg);
          @extend .bg__full;
          margin: 0 auto;
        }
      }
      li{
        color:#6a4922;
        padding:$rem*16 0;
        border-bottom:1px solid #e3d2b4;
        font-size:$rem*20;
        overflow: hidden;
        h4{
          font-size:$rem*25;
        }
        small{
          font-size:75%;
          color:#ab9979;
        }
        span{
          float: right;
        }
        .pic{
          display: inline-block;
          width:$rem*68;
          height:$rem*68;
          border-radius:50%;
          float: left;
           @extend .bg__full;
           margin-right:$rem*20;
        }
        .txt{
          float:left;

        }
      }
    }
  }
}

.rule-wrapper{
  padding:$rem*24;
  .text{
    font-size:$rem*20;
    color:#790000;
    padding:$rem*30;
    border-radius:$rem*12;
    background:#fff;
  }
  h2{
    font-weight: bold;
    text-align: center;
    font-size:$rem*28;
    line-height: 2;
  }
}

//
.icon-praise{
  background-image:url();
   @extend .bg__full;
  width:$rem*42;     
  height:$rem*42;     
  display: inline-block;
      vertical-align: bottom;
}

.ymtui-toast{
  font-size:$rem*24;
}

//弹层
.christmas-dialog{
  .ymtui-commirm-bd{
    font-size:$rem*33;
    strong{
      color:#c33;
    }
    small{
      font-size:66.66%;
    }
  }
  .btn{
    width:$rem*240;
    height: $rem*70;
  }
}
